<script setup>
import {useRouter} from "vue-router"

let router = useRouter();//获取路由对象

let toHome=()=>{
  // router.push("/home");
  // router.push({path:"/home"});
  router.push({name:"myHome"});

}

let toListParams=()=>{
    // router.push("/list?id=1&name=tom");
    // router.push({path:"/list",query:{id:1000,name:"张飞"}})
    router.push({name:"myList",query:{id:1444000,name:"张飞"}})
}

let toListParams2=()=>{
  // router.push({path:"/list/9999/刘备"})
  router.push({name:"myList",params:{id:333,name:"吕布"}})
}


</script>

<template>
  <div>
    <router-link to="/home">首页</router-link>
    <br>
    <router-link to="/list">列表</router-link>
    <br>
    <router-link to="/redirect">重定向测试</router-link>

    <!-- 容器 -->
     <!-- <router-view></router-view> -->

     <router-view name="HomeView"></router-view>
     <router-view name="ListView"></router-view>



     <!-- 编程式路由 -->
      <button @click="toHome()">切换的home页面</button>
      <!-- 传参 -->
       <br>
       <button @click="toListParams">给list组件传递键值对参数</button>
       <button @click="toListParams2">给list组件传递路径参数</button>
  </div>
  
</template>

<style scoped>

</style>
